import React, { useState, useEffect } from 'react'
import { ResultPage } from 'antd-mobile'
import { Tabs, Button } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { IndexBar, List } from 'antd-mobile'
import { Popup, Card, Tag } from 'antd-mobile'
import http from '../../api/index'
import {useSelector,useDispatch} from 'react-redux'
import {setCity} from '../../store/CityReducer'
import {useParams} from 'react-router-dom'



function Index() {
  const [visible1, setVisible1] = useState(false)
  const {start,end} = useSelector(state=>state.CitySlice);
  const dispatch = useDispatch()
  const {type} = useParams()
// 打开弹框
  const choseCity = () => {
    setVisible1(true)
  }
  
  // 城市
  const [cityList, setCityList] = useState([]);
  const [hotCities, setHotCities] = useState([]);
  // 获取城市数据
  const fetchList = async () => {
    const res = await http.get('/api/city');
    console.log(res.data.data)
    setCityList(res.data.data.cityList)
    setHotCities(res.data.data.hotCities)
  }
  useEffect(() => {
    fetchList()
  }, [])
  // 点击城市选择
  const handleCity = (city) =>{
    console.log(city)
    dispatch(setCity({type,city}))
    setVisible1(false)
  }
  return (
    <div>
      <ResultPage
        status=''
        title='火车票查询'
        description='出行注意安全'
      >
        <ResultPage.Card style={{ height: 300, padding: 8 }}>
          <Tabs>
            <Tabs.Tab title='火车票' key='fruits'>
              <div>
                <Tabs>
                  <Tabs.Tab title='单程' key='fruits'>
                    <div>
                      <h1 style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                        <span onClick={() => choseCity('/start')}>{start}</span>
                        <span><LoopOutline fontSize={30} /></span>
                        <span onClick={() => choseCity()}>{end}</span>
                      </h1>
                    </div>
                    <div>
                      <h2>11-02</h2>
                      <Button block color='primary' size='large'>
                        火车票查询
                      </Button>
                    </div>
                  </Tabs.Tab>
                  <Tabs.Tab title='往返' key='vegetables'>
                    往返
                  </Tabs.Tab>
                </Tabs>
              </div>
            </Tabs.Tab>
            <Tabs.Tab title='汽车票' key='vegetables'>
              汽车票
            </Tabs.Tab>
            <Tabs.Tab title='飞机票' key='animals'>
              飞机票
            </Tabs.Tab>
          </Tabs>
        </ResultPage.Card>
      </ResultPage>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '80vh' }}
      >
        {/* 城市 */}
        <Card title={`我的位置: 北京`}></Card>
        <Card title='热门城市:'>
          {
            hotCities && hotCities.map((item, index) => <Tag style={{ margin: '10px' }} key={index}>{item.name}</Tag>)
          }

        </Card>
        <Card title='城市列表:'>
          <div style={{ height: window.innerHeight }}>
            <IndexBar>
              {cityList.map(item => {
                return (
                  <IndexBar.Panel
                    index={item.title}
                    title={`${item.title}`}
                    key={`${item.title}`}
                  >
                    <List>
                      {item.citys.map((item, index) => (
                        <List.Item key={index} onClick={()=>handleCity(item.name)}>{item.name}</List.Item>
                      ))}
                    </List>
                  </IndexBar.Panel>
                )
              })}
            </IndexBar>
          </div>
        </Card>
      </Popup>
    </div>
  )
}

export default Index
